import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Card, Button, DatePicker, Table, Divider, Tag } from 'antd';
// import moment from 'moment';
// import api from '../../utils/api';
import BreadcrumbCustom from '../../components/BreadcrumbCustom';
import { TAG_COLOR } from '../../constant/Enum';
import './style/css/Home.less';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dateString: null
    };
  }

  componentDidMount() {}

  dateChange = (date, dateString) => {
    this.setState({
      dateString
    });
  }

  onSearchData = () => {
    const { dateString } = this.state;
    console.log(dateString);
  }

  render() {
    const columns = [{
        title: '订单编号',
        dataIndex: 'code',
        key: 'code',
        align: 'center'
      }, {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
        align: 'center'
      }, {
        title: '金额',
        dataIndex: 'money',
        key: 'money',
        align: 'center'
      }, {
        title: '是否支付成功',
        key: 'sucess',
        dataIndex: 'sucess',
        align: 'center',
        render: (text, record) => (
          <span><Tag color={TAG_COLOR[record.sucess]}>{text}</Tag></span>
        ),
      }, {
        title: '收款账户',
        dataIndex: 'shoukuan',
        key: 'shoukuan',
        align: 'center'
      }, {
        title: '盘口',
        dataIndex: 'pankou',
        key: 'pankou',
        align: 'center'
      },{
        title: '费率',
        dataIndex: 'feilv',
        key: 'feilv',
        align: 'center'
      },
      // {
      //   title: '操作',
      //   key: 'action',
      //   align: 'center',
      //   render: (text, record) => (
      //     <span>
      //       <a>修改</a>
      //       <Divider type="vertical" />
      //       <a>删除</a>
      //     </span>
      //   ),
      // },
    ];
    const data = [{
        key: '1',
        code: 2019121801,
        time: '2019-12-18 14:36:52',
        money: 500,
        sucess: 'YES',
        shoukuan: '13328979761',
        pankou: '1',
        feilv: '3.08%',
      }, {
        key: '2',
        code: 2019121802,
        time: '2019-12-18 14:45:52',
        money: 1000,
        sucess: 'NO',
        shoukuan: '13328979761',
        pankou: '1',
        feilv: '3.08%',
      },
    ];
    return (
      <Fragment>
        <BreadcrumbCustom />
        <div className="home-content">
          <div className="home-content-header">
            <Card>
              日期:
              <DatePicker onChange={this.dateChange} style={{ marginLeft: 10, marginRight: 10 }} />
              <Button type="primary" htmlType="button" onClick={this.onSearchData}>查询</Button>
            </Card>
          </div>
          <div className="home-content-main">
            <Table columns={columns} dataSource={data} />
          </div>
        </div>
      </Fragment>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {},
    dispatch,
  ),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);
